<template>
    <div>
        <div class="header ant-row-flex ant-row-flex-space-between ant-row-flex-middle">
            <div class="flex flex-column-center ant-col">
                <div class="flex flex-column-center">
                    <div class="img-cover cover-style live-cover"
                        :style="`backgroundImage: url(${anchor_head_img_url})`"></div>
                    <div class="flex-column">
                        <span class="title">{{ anchor_nickname }}</span>
                        <span class="sub-title">{{ title }}</span>
                    </div>
                    <div class="ant-divider ant-divider-vertical" role="separator"
                        style="margin: 0px 1.02rem; height: 2rem;"></div>
                    <span class="title">在线人数:</span>
                    <div class="flex flex-column-center" style="margin-left: 0.6rem;">
                        <div class="num-item">{{ online_person }}</div>
                    </div>
                    <span class="title">累计观看人数:</span>
                    <div class="flex flex-column-center" style="margin-left: 0.6rem;">
                        <div class="num-item">{{ guankan_renshu }}</div>
                    </div>
                </div>
            </div>
            <div class="ant-col">
                <div class="flex flex-column-center">
                    <div class="wraper">
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index14}px)` }">
                            <div class="num" v-for="(item, index) in arr14" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index13}px)` }">
                            <div class="num" v-for="(item, index) in arr13" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index12}px)` }">
                            <div class="num" v-for="(item, index) in arr12" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index11}px)` }">
                            <div class="num" v-for="(item, index) in arr11" :key="index">{{ item }}</div>
                        </div>
                        <div>年</div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index10}px)` }">
                            <div class="num" v-for="(item, index) in arr10" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index9}px)` }">
                            <div class="num" v-for="(item, index) in arr9" :key="index">{{ item }}</div>
                        </div>
                        <div>月</div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index8}px)` }">
                            <div class="num" v-for="(item, index) in arr8" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index7}px)` }">
                            <div class="num" v-for="(item, index) in arr7" :key="index">{{ item }}</div>
                        </div>
                        <div>日</div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index6}px)` }">
                            <div class="num" v-for="(item, index) in arr6" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index5}px)` }">
                            <div class="num" v-for="(item, index) in arr5" :key="index">{{ item }}</div>
                        </div>
                        <div>:</div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index4}px)` }">
                            <div class="num" v-for="(item, index) in arr4" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index3}px)` }">
                            <div class="num" v-for="(item, index) in arr3" :key="index">{{ item }}</div>
                        </div>
                        <div>:</div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index2}px)` }">
                            <div class="num" v-for="(item, index) in arr2" :key="index">{{ item }}</div>
                        </div>
                        <div class="column" :style="{ transform: `translateY(${-lineHeight * index1}px)` }">
                            <div class="num" v-for="(item, index) in arr1" :key="index">{{ item }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="padding: 10px;">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="card-title">公告</span>
                        </div>
                        <div class="ant-card-body">
                            <div class="live-utils flex ant-row" style="flex-wrap: wrap;" id="live-utils">

                                <el-tabs v-model="activeName2" @tab-click="dianji_tab_heiban" style="width:100%;">
                                    <el-tab-pane label="公告" name="gonggao2">
                                        <div class="gonggao_div">
                                            <el-input placeholder="发布公告..." id="gonggao_textInput" type="textarea"
                                                :rows="3" v-model="gonggao_textInput" class="input-with-select"
                                                      maxlength="3000" show-word-limit
                                            >
                                            </el-input>
                                            <!--<label for="gonggao_textInput" @click="gonggao_send" class="fasong_label">发送</label>-->
                                            <el-button @click="gonggao_send" size="mini"
                                                style="margin: 2px 5px;">发送</el-button>
                                        </div>

                                    </el-tab-pane>
                                    <el-tab-pane label="小黑板" name="xiaoheiban2">
                                        <div class="xiaoheiban_div">

                                            <el-button type="primary" @click="openUploadDial()" size="mini"
                                                style="margin-top:10px;width: 150px;position: absolute;left: 0;">选择图片</el-button>
                                            <div class="scroll-container">
                                                <div class="scroll-content">
                                                    <div class="imglist_content">
                                                        <div class="img_item" :key="index"
                                                            v-for="(item, index) in imgList">
                                                            <img class="img_img" :src="item" />
                                                            <div class="del_img" @click="delimg(item)">删除</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <el-input placeholder="说点什么..." type="textarea" id="xiaoheiban_textInput"
                                                :rows="3" v-model="xiaoheiban_textInput" class="input-with-select"
                                                      maxlength="3000" show-word-limit
                                                style="margin-top: 15px;">
                                            </el-input>
                                            <div style="display:flex;align-items: space-between;width:100%">
                                                <label for="xiaoheiban_textInput" @click="xiaoheiban_send"
                                                    class="shangqiang_label">上墙</label>
                                                <label for="xiaoheiban_textInput" @click="xiaoheiban_send2"
                                                    class="shangqiang_label2">下墙</label>
                                            </div>
                                        </div>

                                    </el-tab-pane>
                                </el-tabs>

                            </div>
                        </div>
                    </el-card>
                    <el-card class="" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="card-title">直播互动</span>
                            <div style="float: right; padding: 3px 0; display: none;">
                                <span class="font3" style="margin: 0px 2px 0px 5px;">隐藏数字人</span>
                                <el-switch @click.native="hideDigitMan" v-model="switch_hide_digit_man"
                                    active-color="#ff4949"></el-switch>
                            </div>
                            <div style="float: right; padding: 3px 0">
                                <span class="font3" style="margin: 0px 2px 0px 5px;">隐藏昵称</span>
                                <el-switch @click.native="imHideNickname" v-model="switch_hide_nickname"
                                    active-color="#ff4949"></el-switch>
                            </div>
                            <div style="padding: 3px 0">
                                <div style="float: right; padding: 3px 0; display: none;">
                                    <span class="font3" style="margin: 0px 2px 0px 5px;">全局禁言</span>
                                    <el-switch @click.native="imAllSilence" v-model="switch_all_silence"
                                        active-color="#ff4949"></el-switch>
                                </div>
                            </div>
                        </div>
                        <div class="ant-card-body">
                            <!--  v-if="status === 1" -->
                            <div class="flex-column flex-center" id="chatInteraction">
                                <el-tabs v-model="activeCommentsName" type="card" @tab-click="handleClick" style="width:100%;">

                                    <el-tab-pane label="全部" name="zero">
                                        <live-sign-in ref="liveSignInRef"></live-sign-in>
                                        <live-msg ref="liveMsgAllRef" :messageList="msgListAll"
                                                  :isScroll="isMsgScroll" :msgPage="msgPage" :isLoading="isMsgLoading"
                                                  @loadMore="loadMore" @sendHe="sendHe"
                                                  @silence="silence" @endSilence="endSilence"
                                                  @hideMsg="hideMsg" @showMsg="showMsg"/>
                                        <el-row :gutter="10" style="margin-bottom: 10px">
                                            <el-col :span="8">
                                                <el-button size="mini" @click="autoscroll" icon="el-icon-refresh" type="danger" round>自动滚屏</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-tab-pane>
                                    <el-tab-pane label="评论" name="first">
                                        <live-msg ref="liveMsgRef" :messageList="msgList" 
                                                  :isScroll="isMsgScroll" :msgPage="msgPage" :isLoading="isMsgLoading"
                                                  @loadMore="loadMore" @sendHe="sendHe"
                                                  @silence="silence" @endSilence="endSilence"
                                                  @hideMsg="hideMsg" @showMsg="showMsg"/>
                                        <el-row :gutter="10" style="margin-bottom: 10px">
                                            <el-col :span="8">
                                                <el-button size="mini" @click="autoscroll" icon="el-icon-refresh" type="danger" round>自动滚屏</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" v-if="textUserInput" style="margin-bottom: 10px">
                                            <el-col :span="19">
                                                <el-input size="mini" class="el-input__inner" v-model="textUserInput" disabled></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button size="mini" @click.stop="endHeSendClean">取消</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10">
                                            <el-col :span="19">
                                                <div class="el-input el-input--mini el-input--suffix">
                                                    <input ref="input_text_send" v-model="textInput" class="el-input__inner" @keyup.enter="sendLiveMsg">
                                                </div>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button size="mini" type="primary" @click.stop="sendLiveMsg" :disabled="isMyselfLoading">发送</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-tab-pane>
                                    <el-tab-pane label="隐藏" name="second">
                                        <live-msg ref="liveHideRef" propStyle="height:547px" :messageList="msgHideList"
                                                  @silence="silence" @endSilence="endSilence"
                                                  @hideMsg="hideMsg" @showMsg="showMsg"/>
                                    </el-tab-pane>
                                    <el-tab-pane label="自嗨" name="third">
                                        <live-silence-msg ref="liveForbidRef" propStyle="height:547px"
                                                  :messageList="msgForbidList" @sendHe="sendHe" :isScroll="isMsgScroll"
                                                  @silence="silence" @endSilence="endSilence"
                                                  @hideMsg="hideMsg" @showMsg="showMsg"/>
                                        <el-row :gutter="10" style="margin-bottom: 10px">
                                            <el-col :span="8">
                                                <el-button size="mini" @click="autoscroll" icon="el-icon-refresh" type="danger" round>自动滚屏</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10" v-if="textUserInput" style="margin-bottom: 10px">
                                            <el-col :span="19">
                                                <el-input size="mini" class="el-input__inner" v-model="textUserInput" disabled></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button size="mini" @click.stop="endHeSendClean">取消</el-button>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="10">
                                            <el-col :span="19">
                                                <div class="el-input el-input--mini el-input--suffix">
                                                    <input ref="input_text_send_silence" v-model="textInput" class="el-input__inner" @keyup.enter="sendLiveMsg">
                                                </div>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button size="mini" type="primary" @click.stop="sendLiveMsg" :disabled="isMyselfLoading">发送</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-tab-pane>
                                    <el-tab-pane label="违禁评论" name="fourth">
                                        <live-msg ref="liveIllegalRef" propStyle="height:547px"
                                                  :messageList="msgIllegalList"
                                                  @silence="silence" @endSilence="endSilence"
                                                  @hideMsg="hideMsg" @showMsg="showMsg"/>
                                    </el-tab-pane>
                                    <el-tab-pane label="违禁词库" name="fifth">
                                        <live-lexicon ref="liveLexiconRef" propStyle="507px" :messageList="msgLexiconList"
                                                      @addLexicon="addLexicon" @delLexicon="delLexicon"/>
                                        <el-input placeholder="请输入添加违禁词" v-model="textLexiconInput"
                                                  class="input-with-select" @change="addLexicon">
                                            <el-select v-model="groupLexiconValue" slot="prepend" placeholder="请选择">
                                                <el-option :label="item.name" :value="item.id"
                                                           v-for="(item, index) in groupLexiconList"
                                                           :key="index"></el-option>
                                            </el-select>
                                            <el-button slot="append">添加</el-button>
                                        </el-input>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <!--<div v-else-if="status === 2" class="flex-column flex-center no-data" style="margin: 19.9rem auto;">-->
                            <!--  <img src="@/assets/img/no-live.png" class="no-live-icon">-->
                            <!--  <span>直播已结束</span>-->
                            <!--</div>-->
                            <!--<div v-else class="flex-column flex-center no-data" style="margin: 19.9rem auto;">-->
                            <!--  <img src="@/assets/img/no-live.png" class="no-live-icon">-->
                            <!--  <span>您尚未开始直播</span>-->
                            <!--</div>-->

                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10">
                    <el-card shadow="hover">
                        <div class="flex flex-column-center">
                            <el-col :span="8">
                                <div v-if="status === 1" class="wraper">
                                    <span class="font3"
                                          style="letter-spacing:0;line-height: 1.3rem;">累计直播时长：</span>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index06}px)`}">
                                        <div class="num" v-for="(item, index) in arr6" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index05}px)`}">
                                        <div class="num" v-for="(item, index) in arr5" :key="index">{{ item }}</div>
                                    </div>
                                    <div>:</div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index04}px)`}">
                                        <div class="num" v-for="(item, index) in arr4" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index03}px)`}">
                                        <div class="num" v-for="(item, index) in arr3" :key="index">{{ item }}</div>
                                    </div>
                                    <div>:</div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index02}px)`}">
                                        <div class="num" v-for="(item, index) in arr2" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*index01}px)`}">
                                        <div class="num" v-for="(item, index) in arr1" :key="index">{{ item }}</div>
                                    </div>
                                </div>
                                <div v-else-if="status === 0" class="wraper">
                                    <span class="font3" style="letter-spacing:0;line-height: 1.3rem;">距开播：</span>
                                    <!--
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour8}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr8" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour7}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr7" :key="index">{{ item }}</div>
                                    </div>
                                    <div>天</div>
                                    -->
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour6}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr6" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour5}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr5" :key="index">{{ item }}</div>
                                    </div>
                                    <div>:</div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour4}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr4" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour3}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr3" :key="index">{{ item }}</div>
                                    </div>
                                    <div>:</div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour2}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr2" :key="index">{{ item }}</div>
                                    </div>
                                    <div class="column" :style="{transform: `translateY(${-lineHeight*pour1}px)`}">
                                        <div class="num" v-for="(item, index) in pourArr1" :key="index">{{ item }}</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4" :offset="12">
                                <el-button v-if="status === 1" size="small" active-color="#ff4949"
                                           @click="imDigitalHumanEndLiveFrame">
                                    结束直播
                                </el-button>
                                <el-button v-else-if="status === 2" size="small" active-color="#ff4949">直播已结束
                                </el-button>
                                <el-button v-else size="small" active-color="#ff4949">直播未开始</el-button>
                            </el-col>
                        </div>
                    </el-card>
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="card-title">{{ title }}</span>
                            <div style="padding: 3px 0">
                                <div style="float: right; padding: 3px 0">
                                    <span class="font3" style="margin: 0px 2px 0px 5px;">小黄车显示</span>
                                    <el-switch @click.native="imLittleYellowCarCount"
                                               v-model="switch_little_yellow_car_show"
                                               active-color="#ff4949"></el-switch>
                                </div>
                                <div style="float: right; padding: 3px 0">
                                    <el-input-number :min="0" size="small" v-model="online_count_num"
                                                     controls-position="right"
                                                     style="margin: 0 2px;width:100px;"></el-input-number>
                                    <el-button @click.native="imOnlineCount" size="small" active-color="#ff4949"
                                               style="margin: 0 2px;">
                                        设置在线人数
                                    </el-button>
                                </div>
                            </div>
                        </div>
                        <div class="ant-card-body">
                            <div class="live-room-box flex flex-center" style="/* height: 680px; position: relative; */">
                                <div id="liveBox" class="live-room" style="width: 375px; height: 667px;">
                                    <i class="fa fa-spin fa-circle-o-notch"></i>
                                    <div class="shadow">
                                        <div v-if="status === 1" class="flex-column flex-center absolute-center">
                                            <iframe
                                                ref="iframe"
                                                width="375px"
                                                height="667px"
                                                frameborder="0"
                                                :src="`${requestUrl}?${iframeParams}`">
                                            </iframe>
                                            <!-- <img src="@/assets/img/no-live.png" class="no-live-icon">
                                            <span>已开播</span> -->
                                        </div>
                                        <div v-else-if="status === 2" class="flex-column flex-center absolute-center">
                                            <img src="@/assets/img/no-live.png" class="no-live-icon">
                                            <span>已关播</span>
                                        </div>
                                        <div v-else class="flex-column flex-center absolute-center">
                                            <img src="@/assets/img/no-live.png" class="no-live-icon">
                                            <span>未开播</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-row :gutter="10" style="margin-top: 10px">
                                <el-col :span="6">
                                    <el-switch
                                        size="mini"
                                        v-model="handoffUserType"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        active-text="锁定"
                                        inactive-text="动态">
                                    </el-switch>
                                </el-col>
                                <el-col :span="6">
                                    <el-select
                                        v-model="randomUserNick"
                                        @change="init_digit_person_list(2)"
                                        size="mini"
                                        filterable
                                        placeholder="可搜索">
                                        <el-option
                                            v-for="(item, index) in digit_person_list"
                                            :key="index"
                                            :label="item.nick"
                                            :value="index">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-input-number :min="1" :max="99" size="mini" v-model="textFrequencyInput" controls-position="right"></el-input-number>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10" style="margin-top: 10px">
                                <el-col :span="21">
                                    <div class="el-input el-input--mini el-input--suffix">
                                        <input ref="input_text_digital_send" v-model="textDigitalInput" class="el-input__inner" @keyup.enter="sendLiveDigitalMsg">
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <el-button size="mini" type="primary" @click.stop="sendLiveDigitalMsg" :disabled="isDigitalLoading">发送</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="card-title">直播工具</span>
                            <div style="float: right; padding: 3px 0;display: flex;align-items: center;">
                                <span class="font3" style="margin: 0px 2px 0px 5px;">操作延迟时间</span>
                                <el-input-number style="width: 100px;" :min="0" size="small"
                                                 v-model="operation_delay_num"
                                                 controls-position="right"></el-input-number>
                                <el-button @click="setDelayNum" size="mini" style="margin: 0px 2px 0px 5px;">保存
                                </el-button>
                            </div>
                        </div>
                        <div class="ant-card-body">
                            <div class="live-utils flex ant-row" style="flex-wrap: wrap;" id="live-utils">
                                <!-- imDigitalHumanSignInFrame -->
                                <div @click="imDigitalHumanSignInRandom" class="ant-spin-nested-loading"
                                     style="width: 25%;">
                                    <div class="ant-spin-container">
                                        <div class="util-item flex flex-column flex-column-center">
                                            <img src="@/assets/img/human-in.png">
                                            <span class="font1">数字人进场</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- imDigitalHumanCarFrame -->
                                <div @click="imDigitalHumanCarRandom" class="ant-spin-nested-loading"
                                     style="width: 25%;">
                                    <div class="ant-spin-container">
                                        <div class="util-item flex flex-column flex-column-center">
                                            <img src="@/assets/img/car.png">
                                            <span class="font1">浏览小黄车</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- imDigitalHumanPayFrame -->
                                <div @click="imDigitalHumanPayRandom" class="ant-spin-nested-loading"
                                     style="width: 25%;">
                                    <div class="ant-spin-container">
                                        <div class="util-item flex flex-column flex-column-center">
                                            <img src="@/assets/img/pay-order.png">
                                            <span class="font1">数字人下单</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- imDigitalHumanCommentRandom -->
                                <div @click="imDigitalHumanCommentFrame"
                                     class="util-item flex flex-column flex-column-center"
                                     style="width: 25%;">
                                    <img src="@/assets/img/comment.png">
                                    <span class="font1">数字人评论</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="card-title">课程</span>
                            <div style="float: right; padding: 3px 0;display: flex;align-items: center;">
                                <!--<span class="font3" style="margin: 0px 2px 0px 5px;">正在热卖</span>-->
                                <!--<el-switch @click.native="imSetSelling" v-model="switch_selling_show" active-color="#ff4949"></el-switch>-->
                                <el-input-number :min="0" size="small" v-model="selling_num" controls-position="right"
                                                 style="margin: 0 2px;width: 100px;"></el-input-number>
                                <el-button @click.native="imSetSelling" size="small" active-color="#ff4949"
                                           style="margin: 0 2px;">
                                    热卖设置
                                </el-button>
                            </div>
                            <div style="float: right; padding: 3px 0;display: flex;align-items: center;">
                                <!--<span class="font3" style="margin: 0px 2px 0px 5px;">仅剩库存</span>-->
                                <!--<el-switch @click.native="imSetInventory" v-model="switch_inventory_show" active-color="#ff4949"></el-switch>-->
                                <el-input-number :min="0" size="small" v-model="inventory_num" controls-position="right"
                                                 style="margin: 0 2px;width: 100px;"></el-input-number>
                                <el-button @click.native="imSetInventory" size="small" active-color="#ff4949"
                                           style="margin: 0 2px;">
                                    库存设置
                                </el-button>
                            </div>
                        </div>
                        <div class="ant-card-body">
                            <div id="course-com" class="course-list flex flex-column" style="height: 657px;">
                                <div class="flex flex-column" style="height: 100%;">
                                    <!--
                                    <div class="flex flex-sb sticky" style="align-items: center; margin-bottom: 1rem;">
                                        <div>
                                            <span class="ant-input-affix-wrapper ant-input-search" style="width: 200px;">
                                                <el-input size="small" placeholder="请输入课程名称搜索" v-model="search_course_name" class="input-with-select">
                                                    <el-button size="small" slot="append" icon="el-icon-search"></el-button>
                                                </el-input>
                                            </span>
                                        </div>
                                        <div class="flex flex-column-center">
                                            <div class="font2 flex flex-column-center pointer">
                                                <i class="el-icon-download" style="font-size: 0.7rem;margin-right: 0.2rem;"></i>
                                                <span style="line-height: 1;">一键下架</span>
                                            </div>
                                            <div class="font2 flex flex-column-center pointer" style="margin: 0 0.6rem;">
                                                <i class="el-icon-refresh-right" style="font-size: 0.7rem;margin-right: 0.2rem;"></i>
                                                <span style="line-height: 1;">刷新列表</span>
                                            </div>
                                            <div class="font2 flex flex-column-center pointer">
                                                <i class="el-icon-goods" style="font-size: 0.7rem;margin-right: 0.2rem;"></i>
                                                <span style="line-height: 1;">添加课程</span>
                                            </div>
                                        </div>
                                    </div>
                                    -->

                                    <div class="course-item" v-for="(item, index) in goodsList" :key="index"
                                         style="background-color: rgba(249, 195, 9, 0.1);">
                                        <div class="flex flex-sb">
                                            <div class="goods-info flex">
                                                <div class="font1" style="align-self: center; margin-right: 0.5rem;">
                                                    {{ index + 1 }}
                                                </div>
                                                <div class="img-cover cover-style goods-img">
                                                    <span class="ant-avatar ant-avatar-square ant-avatar-image"
                                                          style="width: 100%; height: 100%;border-radius:0;">
                                                        <img :src="item.img"/>
                                                    </span>
                                                    <div class="shadow-box flex flex-center">
                                                        <i aria-label="图标: edit" tabindex="-1"
                                                           class="anticon anticon-edit"
                                                           style="color: rgb(255, 255, 255);">
                                                            <svg viewBox="64 64 896 896" data-icon="edit" width="1em"
                                                                 height="1em" fill="currentColor"
                                                                 aria-hidden="true" focusable="false" class="">
                                                                <path
                                                                    d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path>
                                                            </svg>
                                                        </i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font3 text-ellipsis-2" style="max-width: 7rem;">
                                                        {{ item.title }}
                                                    </div>
                                                    <div class="flex flex-column-center" style="margin: 0.2rem 0px;">
                                                        <img src="@/assets/img/id-tag.png" class="id-tag">
                                                        <span class="font4">{{ item.id }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex">
                                                <div class="flex flex-column">
                                                    <span class="font3">{{ item.xianjia }}</span>
                                                    <span class="font2" style="color: rgb(102, 102, 102);">售价</span>
                                                </div>
                                                <div class="flex flex-column" style="margin: 0 2rem;">
                                                    <span class="font3">{{ item.count }}</span>
                                                    <span class="font2" style="color: rgb(102, 102, 102);">售出</span>
                                                </div>
                                                <div class="flex flex-column">
                                                    <span class="font3">¥{{ item.amount > 0 ? (item.amount / 100).toFixed(2) : 0 }}</span>
                                                    <span class="font2"
                                                          style="color: rgb(102, 102, 102);">成交金额</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="item.id === isCardId && isCardStatus === true" class="flex flex-sb" style="margin-top: 0.7rem;">
                                            <div  class="flex flex-column-center">
                                                <i class="fa fa-spin fa-spinner" style="color: #eb3a3d;"></i>
                                                <span v-if="" class="font1 teaching-txt">讲解中</span>
                                            </div>
                                            <div class="flex flex-column-center action-btns">
                                                <el-button size="mini" type="button" class="font2 ant-btn"
                                                           @click="imPopUp(item, true)"><span>开启弹窗</span>
                                                </el-button>
                                                <el-button v-if="item.isSellOutStatus" size="mini" type="button" class="font2 ant-btn" @click="imSellOut(item, false)" style="background: rgba(228, 67, 48, 0.2); color: rgb(228, 67, 48);"><span>取消售空</span></el-button>
                                                <el-button v-else size="mini" type="button" class="font2 ant-btn" @click="imSellOut(item, true)"><span>设置售空</span></el-button>
                                                <!--<el-button size="mini" type="button" class="font2 ant-btn"><span>主屏幕弹出</span></el-button>-->
                                                <!--<el-button size="mini" type="button" class="font2 ant-btn"><span>营销设置</span></el-button>-->
                                                <el-button size="mini" type="button" class="font2 ant-btn"
                                                           @click="imCard(item, false)"
                                                           style="background: rgba(228, 67, 48, 0.2); color: rgb(228, 67, 48);">
                                                    <span>取消讲解</span></el-button>
                                                <span class=""></span>
                                            </div>
                                        </div>
                                        <div v-else class="flex flex-sb" style="margin-top: 0.7rem;">
                                            <div  class="flex flex-column-center">
                                                <span  class="font1 teaching-txt">上架中</span>
                                            </div>

                                            <div class="flex flex-column-center action-btns">
                                                <!--SellOut<el-button size="mini" type="button" class="font2 ant-btn"><span>主屏幕弹出</span></el-button>-->
                                                <el-button size="mini" type="button" class="font2 ant-btn"
                                                           @click="imPopUp(item, true)"><span>开启弹窗</span>
                                                </el-button>
                                                <el-button v-if="item.isSellOutStatus" size="mini" type="button" class="font2 ant-btn" @click="imSellOut(item, false)" style="background: rgba(228, 67, 48, 0.2); color: rgb(228, 67, 48);"><span>取消售空</span></el-button>
                                                <el-button v-else size="mini" type="button" class="font2 ant-btn" @click="imSellOut(item, true)"><span>设置售空</span></el-button>
                                                <el-button v-if="item.id === isCardId && isCardStatus === true" size="mini" type="button" class="font2 ant-btn"
                                                           @click="imCard(item, false)"
                                                           style="background: rgba(228, 67, 48, 0.2); color: rgb(228, 67, 48);">
                                                    <span>取消讲解</span>
                                                </el-button>
                                                <el-button v-else size="mini" type="button" class="font2 ant-btn"
                                                           @click="imCard(item, true)"><span>开启讲解</span>
                                                </el-button>
                                                <span class=""></span>
                                            </div>
                                           
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-card class="xingweijilu_contnet" shadow="hover">
                        <el-tabs v-model="activeName" @tab-click="dianji_tab">
                            <el-tab-pane label="用户数据" name="userinfo">

                                <user-info ref="userinfo" v-if="activeName=='userinfo'" :liveId="live_id"></user-info>

                            </el-tab-pane>
                            <el-tab-pane label="邀请总览" name="yaoqing">

                                <yao-qing ref="yaoqing" v-if="activeName=='yaoqing'" :liveId="live_id"></yao-qing>

                            </el-tab-pane>
                            <el-tab-pane label="评论" name="pinglun">

                                <ping-lun ref="pinglun" v-if="activeName=='pinglun'" :liveId="live_id"></ping-lun>

                            </el-tab-pane>
                            <el-tab-pane label="管控记录" name="guankong">

                                <guan-kong ref="guankong" v-if="activeName=='guankong'" :liveId="live_id"></guan-kong>

                            </el-tab-pane>
                            <el-tab-pane label="营销操作" name="yingxiao">

                                <ying-xiao ref="yingxiao" v-if="activeName=='yingxiao'" :liveId="live_id"></ying-xiao>

                            </el-tab-pane>
                            <el-tab-pane label="邀约到课" name="yaoyue">

                                <yao-yue ref="yaoyue" v-if="activeName=='yaoyue'" :liveId="live_id"></yao-yue>

                            </el-tab-pane>
                            <el-tab-pane label="购买记录" name="paycourse">

                                <pay-course ref="paycourse" v-if="activeName=='paycourse'" :liveId="live_id"></pay-course>

                            </el-tab-pane>
                            <el-tab-pane label="抽奖" name="choujiang">

                                <chou-jiang ref="choujiang" v-if="activeName=='choujiang'" :liveId="live_id" @choujiang = "choujiang" @lotteryMsg = "lotteryMsg" @finish = "finish"></chou-jiang>
                                
                            </el-tab-pane>
                            <el-tab-pane label="公告记录" name="notice">
                                <notice ref="notice" v-if="activeName=='notice'"  :liveId = "live_id"></notice>
                            </el-tab-pane>
                            <el-tab-pane label="小黑板记录" name="blackbord">
                                <blackbord ref="blackbord" v-if="activeName=='blackbord'"  :liveId = "live_id"></blackbord>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <control-digital-human
            title="数字人评论"
            :visible="isDigitalHumanComment"
            width="80%"
            height="80%"
            @send="imDigitalHumanCommentSendCommand"
            @sendBatch="imDigitalHumanCommentSendBatchCommand"
            @close="closeDigitalHumanCommentFrame"
        />
        <control-pay
            title="数字人下单"
            :visible="isDigitalHumanPay"
            width="80%"
            height="80%"
            @send="imDigitalHumanPaySendCommand"
            @sendBatch="imDigitalHumanPaySendBatchCommand"
            @close="closeDigitalHumanPayFrame"
        />
        <control-sign-in
            title="数字人进场"
            :visible="isDigitalHumanSignIn"
            width="80%"
            height="80%"
            @send="imDigitalHumanSignInSendCommand"
            @sendBatch="imDigitalHumanSignInSendBatchCommand"
            @close="closeDigitalHumanSignInFrame"
        />
        <control-car
            title="数字人浏览小黄车"
            :visible="isDigitalHumanCar"
            width="80%"
            height="80%"
            @send="imDigitalHumanCarSendCommand"
            @sendBatch="imDigitalHumanCarSendBatchCommand"
            @close="closeDigitalHumanCarFrame"
        />
        <control-end-live
            title="关闭直播"
            :visible="isDigitalHumanEndLive"
            :liveId="live_id"
            width="25%"
            height="32%"
            @close="closeDigitalHumanEndLiveFrame"
            @submit="imDigitalHumanEndLiveExecute"
        />
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum"
                                            @selectSure="selectImgs" :type="0">
            
        </select-img>
    </div>
</template>

<script>
import controlJs from './control.js';

export default {
    ...controlJs,
}
</script>

<style lang="scss">
/*@import "@/assets/css/common";
@import "control";*/
@import './control.scss';


</style>
